<template>
    <h4>当前求和为：{{sum}}</h4>
    <button @click="sum++">点我x+1</button>
    <hr>
    <h1>人的信息</h1>
    <h2>姓名：{{name}}</h2>
    <h2>姓名：{{age}}</h2>
    <h2>薪资：{{job.j1.salary}}K</h2>
    <h2 v-if="person.car">座驾信息：{{person.car}}K</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.j1.salary++">增长薪资</button>
    <button @click="showRawPerson">输出最原始的person</button>
    <button @click="addCar">给人添加一台车</button>
    <button @click="person.car.name = 'bmw'">换车名</button>
    <button @click="person.car.price = '50W'">换价格</button>
</template>

<script>
  import {reactive,ref,toRefs,toRaw, markRaw} from 'vue'
  export default {
    name: 'Demo',
    setup(){
        
      let person = reactive({
        name:'张三',
        age:18,
        job:{
          j1:{
            salary:20
          }
        }
      })
     let sum = ref(0)

    function showRawPerson(){
      const p = toRaw(person)
      console.log(p)
    }

    function addCar(){
      let car = {
        name:'奔驰',
        price:'40W'
      }
      person.car = markRaw(car)
    }

      //返回一个对象（常用）
      return {  
        person,
        sum,
        ...toRefs(person),
        showRawPerson,
        addCar
      }

    },
  }
</script>

